{{! -------------------------------------------------------------------------- }}
{{! Copyright 2002-2016, OpenNebula Project, OpenNebula Systems                }}
{{!                                                                            }}
{{! Licensed under the Apache License, Version 2.0 (the "License"); you may    }}
{{! not use this file except in compliance with the License. You may obtain    }}
{{! a copy of the License at                                                   }}
{{!                                                                            }}
{{! http://www.apache.org/licenses/LICENSE-2.0                                 }}
{{!                                                                            }}
{{! Unless required by applicable law or agreed to in writing, software        }}
{{! distributed under the License is distributed on an "AS IS" BASIS,          }}
{{! WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.   }}
{{! See the License for the specific language governing permissions and        }}
{{! limitations under the License.                                             }}
{{! -------------------------------------------------------------------------- }}

<div class="row">
  <div class="large-12 columns">
    <input id="{{diskTabId}}radioImage" type="radio" name="{{diskTabId}}" value="image" checked>
    <label for="{{diskTabId}}radioImage">{{tr "Image"}}</label>
    <input id="{{diskTabId}}radioVolatile" type="radio" name="{{diskTabId}}" value="volatile">
    <label for="{{diskTabId}}radioVolatile">{{tr "Volatile disk"}}</label>
  </div>
</div>
<div id="disk_type" class="image">
  {{{imageTableSelectHTML}}}
  <br>
  {{#advancedSection (tr "Advanced options") }}
  <fieldset>
    <legend>{{tr "Image"}}</legend>
    <div class="row">
      <div class="medium-6 columns">
        <label for="IMAGE_ID">
          {{tr "Image ID"}}
        </label>
        <input type="text" wizard_field="IMAGE_ID" id="IMAGE_ID" name="IMAGE_ID"/>
      </div>
      <div class="medium-6 columns">
        <label for="IMAGE">
          {{tr "Image name"}}
        </label>
        <input type="text" wizard_field="IMAGE" id="IMAGE" name="IMAGE"/>
      </div>
    </div>
    <div class="row">
      <div class="medium-6 columns">
        <label for="IMAGE_UID">
          {{tr "Image owner's user ID"}}
        </label>
        <input type="text" wizard_field="IMAGE_UID" id="IMAGE_UID" name="IMAGE_UID"/>
      </div>
      <div class="medium-6 columns">
        <label for="IMAGE_UNAME">
          {{tr "Image owner's user name"}}
        </label>
        <input type="text" wizard_field="IMAGE_UNAME" id="IMAGE_UNAME" name="IMAGE_UNAME"/>
      </div>
    </div>
  </fieldset>
  {{> ./options volatile=false }}
  {{/advancedSection}}
</div>
<div id="disk_type" class="volatile" style="display: none;">
  <div class="row">
    <div class="medium-6 columns left">
      <label for="SIZE">
        {{tr "Size in MB"}}
      </label>
      <input wizard_field="SIZE" type="number" id="SIZE" name="SIZE"/>
    </div>
  </div>
  <div class="row">
    <div class="medium-6 columns">
      <label for="TYPE">
        {{tr "Disk type"}}
      </label>
      <select wizard_field="TYPE" id="TYPE" name="type">
        <option value="fs">{{tr "FS"}}</option>
        <option value="swap">{{tr "Swap"}}</option>
      </select>
    </div>
    <div class="medium-6 columns">
      <label for="FORMAT">
        {{tr "Filesystem format"}}
      </label>
      <select wizard_field="FORMAT" name="format" id="FORMAT">
        <option value="raw" selected="selected">raw</option>
        <option value="qcow2">qcow2</option>
      </select>
    </div>
  </div>
  <br>
  {{#advancedSection (tr "Advanced options") }}
  {{> ./options volatile=true }}
  {{/advancedSection}}
</div>
